﻿<div>
        <AntList DataSource="datasource">
                    <Item Context="item">
                        <AntListItemMeta Avatar=@("https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png")
                                         Description="Progresser XTech">
                            <Title>
                                @item.Title
                            </Title>                            
                      
                        </AntListItemMeta>

                        <AntButton Type="@AntButtonType.Link" OnClick="(e)=>open(e, item.Title)">View Profile</AntButton>
                    </Item>
        </AntList>

        <Drawer Width="640" Closable="true" Visible="visible" Title='("User Profile")' OnClose="_=>close()">
            <AntText Strong="true">Personal</AntText>
            <AntRow></AntRow>
            <AntRow Gutter="12">
                <AntCol Span="4">
                    <AntText Strong="true">Full Name:</AntText>
                </AntCol>
                <AntCol Span="8">
                    <AntText>Henry</AntText>
                </AntCol>
                <AntCol Span="4">
                    <AntText Strong="true">Account:</AntText>
                </AntCol>
                <AntCol Span="8">
                    <AntText>AntDesign@example.com</AntText>
                </AntCol>
            </AntRow>
            <AntRow Gutter="12">
                <AntCol Span="4">
                    <AntText Strong="true">City:</AntText>
                </AntCol>
                <AntCol Span="8">
                    <AntText>HangZhou</AntText>
                </AntCol>
                <AntCol Span="4">
                    <AntText Strong="true">Country:</AntText>
                </AntCol>
                <AntCol Span="8">
                    <AntText>China</AntText>
                </AntCol>
            </AntRow>
            <AntRow Gutter="12">
                <AntCol Span="4">
                    <AntText Strong="true">Birthday:</AntText>
                </AntCol>
                <AntCol Span="8">
                    <AntText>February 2,1900</AntText>
                </AntCol>
                <AntCol Span="4">
                    <AntText Strong="true">Website:</AntText>
                </AntCol>
                <AntCol Span="8">
                    <AntText>www.baidu.com</AntText>
                </AntCol>
            </AntRow>

            <AntDivider></AntDivider>
            <AntText Strong="true">Company</AntText>
            <AntRow></AntRow>
            <AntRow>
                <AntCol Span="4">
                    <AntText Strong="true">Position:</AntText>
                </AntCol>
                <AntCol Span="8">
                    <AntText Strong="false">Programmer</AntText>
                </AntCol>
                <AntCol Span="6">
                    <AntText Strong="true">Responsibilities:</AntText>
                </AntCol>
                <AntCol Span="6">
                    <AntText Strong="false">Coding</AntText>
                </AntCol>
            </AntRow>
            <AntRow>
                <AntCol Span="4">
                    <AntText Strong="true">Department:</AntText>
                </AntCol>
                <AntCol Span="8">
                    <AntText Strong="false">XTech</AntText>
                </AntCol>
                <AntCol Span="4">
                    <AntText Strong="true">Supervisor:</AntText>
                </AntCol>
                <AntCol Span="8">
                    <AntText Strong="false">Lin</AntText>
                </AntCol>
            </AntRow>
            <AntRow>
                <AntCol Span="4">
                    <AntText Strong="true">Skills:</AntText>
                </AntCol>
                <AntCol Span="20">
                    <AntText Strong="false">
                        C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc.
                    </AntText>
                </AntCol>

            </AntRow>

            <AntDivider ></AntDivider>
            <AntText Strong="true">Contacts</AntText>
            <AntRow></AntRow>
            <AntRow>
                <AntCol Span="4">
                    <AntText Strong="true">Email:</AntText>
                </AntCol>
                <AntCol Span="8">
                    <AntText Strong="false"> ant-design-Blazor@example.com</AntText>
                </AntCol>
                <AntCol Span="4">
                    <AntText Strong="true">    Phone Number:     </AntText>
                </AntCol>
                <AntCol Span="8">
                    <AntText Strong="false">+86 181 0000 0000 </AntText>
                </AntCol>
            </AntRow>
            <AntRow>
                <AntCol Span="4">
                    <AntText Strong="true">Github:</AntText>
                </AntCol>
                <AntCol Span="20">
                    <AntText Strong="false">https://ant-design-blazor.gitee.io/ </AntText>
                </AntCol>
            </AntRow>
        </Drawer>   
</div>

   @code{

       public class ListDataSource
       {
           public string Title { get; set; }
       };

       List<ListDataSource> datasource = new List<ListDataSource>() {
        new ListDataSource(){Title="Henry"},
        new ListDataSource(){Title="Henry"}
    };
       bool visible = false;


       void open(MouseEventArgs arg, string Title)
       {
           this.visible = true;
       }

       void close()
       {
           this.visible = false;
       }

}